<template>
	<view>
		<u-navbar title="任务处置" :title-size="36" :title-width="500" title-color="#fff" back-icon-name="arrow-left"
			back-icon-color="#fff" :background="background" :custom-back="goBack">
		</u-navbar>			
		<view class="content">
			<u-form :model="waterParams" ref="uForm" label-width="160">
				<u-form-item label="开始时间" prop="startTime">
					<u-input v-model="waterParams.startTime" type="text" :border="true" placeholder="请选择时间" @click="StimeFlag = true"/>
					<img class="rightIcon" src="../../../../assets/images/home/icon_calendar.png">
				</u-form-item>
				<u-form-item label="结束时间" prop="endTime">
					<u-input v-model="waterParams.endTime" type="text" :border="true" placeholder="请选择时间" @click="EtimeFlag = true"/>
					<img class="rightIcon" src="../../../../assets/images/home/icon_calendar.png">
				</u-form-item>
				<u-form-item label="防汛队伍" prop="teamName">
					<u-input v-model="teamName" type="text" :border="true" @click="showTeam = true"/>
				</u-form-item>
				<u-form-item label="防汛人员" prop="UserName">
					<u-input v-model="UserName" type="text" :border="true" @click="showUser = true"/>
				</u-form-item>
				<u-form-item label="防汛车辆" prop="CarName">
					<u-input v-model="CarName" type="text" :border="true" @click="showCar = true"/>
				</u-form-item>
				<div style="margin-bottom: 30rpx;margin-top: 20rpx;">现场照片(处置照片)</div>
				<view class="uni-list list-pd">
			    	<view class="uni-uploader__files">
			    		<block v-for="(image,index) in imageList" :key="index" >
			    			<view class="uni-uploader__file">
			    				<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage(index)"></image>
			    				<i class="close" @tap="deleteImage(index)"></i>
			    			</view>
			    		</block>
						
						<view class="uploader__img"><span @tap="chooseImage">添加图片</span></view>
			    	</view>
			    </view>
				<u-button type="primary" size="default" :ripple='true' style="margin-top: 30rpx;" @click="save">提交</u-button>
			</u-form>
			<u-picker v-model="StimeFlag" mode="time" @confirm="confirmStime" :params="timeParams"></u-picker>
			<u-picker v-model="EtimeFlag" mode="time" @confirm="confirmEtime" :params="timeParams"></u-picker>
			
			<u-select v-model="showTeam" :list="listTeam" @confirm="selectTeam"></u-select>
			<u-select v-model="showUser" :list="listUser" @confirm="selectUser"></u-select>
			<u-select v-model="showCar" :list="listCar" @confirm="selectCar"></u-select>
			
		</view>
		<!-- 底部导航 -->
		<u-tabbar :list="tabbarList" height="40px"></u-tabbar>
	</view>
</template>

<script>
	export default {
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.id = option.id
			this.type = option.type
			this.team = option.stem
		},
		data() {
			return {
				background: {
					backgroundColor: '#4299f7',
				},
				showTime:false,
				id:'',
				type:'',
				waterParams: {
					type: '',
					taskId: '',
					startTime: '',
					endTime: '',
					floodTeam: '',
					floodPerson: '',
					floodCar:'',
				},
				team:'',
				attachFiles:[],  //图片 file集合
				imageShow: true, //显示上传图片按钮
				imageList:[],  //图片数组
				StimeFlag:false,
				EtimeFlag:false,
				timeParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true,
				},
				showTeam:false,
				listTeam:[],
				showUser:false,
				listUser:[],
				showCar:false,
				listCar:[],
				teamName:'',
				UserName:'',
				CarName:'',
			}
		},
		computed: {
			tabbarList (){
				return this.$store.state.common.tabbarList
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			confirmStime(data){  //点击开始时间控件确定按钮赋值
				this.waterParams.startTime = `${data.year}-${data.month}-${data.day} ${data.hour}:${data.minute}:${data.second}`
			},
			confirmEtime(data){  //点击开始时间控件确定按钮赋值
				this.waterParams.endTime = `${data.year}-${data.month}-${data.day} ${data.hour}:${data.minute}:${data.second}`
			},
			selectTeam(data){
				this.teamName = data[0].label
				this.waterParams.floodTeam = data[0].value
			},
			selectUser(data){
				this.UserName = data[0].label
				this.waterParams.floodPerson = data[0].value
			},
			selectCar(data){
				this.CarName = data[0].label
				this.waterParams.floodCar = data[0].value
			},
			chooseImage(){
				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'], //这要注意，camera掉拍照，album是打开手机相册
					success: (res) => {
						if (res.tempFilePaths.length == 9) {
							this.imageShow = false
						}
						if (this.imageList.length >= 9 || res.tempFilePaths.length > 9) {
							uni.showToast({
								icon: 'none',
								title: '最多只可上传9张图片'
							})
							this.imageShow = false
						} else {
							this.imageList = this.imageList.concat(res.tempFilePaths)
							this.attachFiles = this.attachFiles.concat(res.tempFiles)
						}
					}
				});
			},
			previewImage(index) {
				uni.previewImage({
					current: index, //预览图片的下标
					urls: this.imageList, //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以				
				});
			},
			deleteImage(index) {
				this.imageList.splice(index, 1);
				this.attachFiles.splice(index, 1);
			},			
			save(){
				if(this.teamName ==''){
					uni.showToast({
								icon: 'none',
								title: '请选择防汛队伍'
							})
							return false
				}
				if(this.UserName ==''){
					uni.showToast({
								icon: 'none',
								title: '请选择防汛人员'
							})
							return false
				}
				 let taskHandleDto, formdata = new FormData();
				  this.waterParams.type = this.type
				  this.waterParams.taskId = this.id
				 taskHandleDto = this.waterParams;
				 formdata.append("taskHandleDto", JSON.stringify(taskHandleDto));
				  for (let i = 0; i < this.attachFiles.length; i++) {
					 formdata.append("file", this.attachFiles[i], this.attachFiles[i].name);
				 }
				this.$api.reqApi.handleTask(formdata).then(res => {
					if(res.code == 200){
						 let pages = getCurrentPages(); // 当前页面
						 let beforePage = pages[pages.length - 2]; // 前一个页面
						 let beforePage2 = pages[pages.length - 3];
						//  uni.navigateBack({
						//      success: function() {
						//          beforePage.search(); // 执行前一个页面的onLoad方法
						//      }
						//  });
						 uni.switchTab({
							 url:'../../../../pages/scheduling/taskManage/index'
						 })
						 if(beforePage2&&beforePage2.route=='pages/scheduling/taskManage/index'){
							 beforePage2.search();
						 }else if(beforePage&&beforePage.route=='pages/scheduling/taskManage/index'){
							 beforePage.search();
						 }else{
							  uni.navigateBack({
						     success: function() {
						         beforePage.search(); // 执行前一个页面的onLoad方法
						     }
						 	});
						 }
					}
				})
			},
			teamAll(){
				this.$api.reqApi.teamGetAll().then(res => {
					if(res.code == 200){
						this.listTeam = res.data.map(item => {
							return {
								value: item.code,
								label: item.name,
							}
						});
						let list = []
						console.log(this.listTeam)
						if(this.team){
							this.listTeam.forEach((ele,index)=>{
								if(ele.label ==this.team){
									list.push(this.listTeam[index])
								}
							})
						}else{
							list.push(this.listTeam[0])
						}
						
						this.selectTeam(list)
					}
				})
			},
			userAll(){
				this.$api.reqApi.userListAll().then(res => {
					if(res.code == 200){
						this.listUser = res.data.map(item => {
							let deptName = item.deptName ? item.deptName + ',':'';
							let name = item.name ? item.name + ',':'';
							let phone = item.phone ? item.phone:'';
							return {
								value: item.id,
								label: deptName + name + phone,
							}
						});
						let list = []
						list.push(this.listUser[0])
						this.selectUser(list)
					}
				})
			},
			carAll(){
				this.$api.reqApi.carGetAll().then(res => {
					if(res.code == 200){
						this.listCar = res.data.map(item => {
							return {
								value: item.id,
								label: item.typeName + ',' + item.platNum,
							}
						});
						let list = []
						list.push(this.listCar[0])
						this.selectCar(list)
					}
				})
			},
			
		},
		mounted() {
			this.waterParams.startTime = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd') + ' ' + this.$u.timeFormat(new Date().getTime(), 'hh:MM:ss')
			this.waterParams.endTime = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd') + ' ' + this.$u.timeFormat(new Date().getTime(), 'hh:MM:ss')
		    this.teamAll()
		    this.userAll()
			this.carAll()
		}
	}
</script>

<style lang="scss" scoped>
uni-page-body{
	background-color: #fff;
}
.content{
	background-color: #fff;
	padding: 20rpx 30rpx;
	margin-bottom: 40rpx;
	height: 100%;
}
.uni-uploader__files{
	display: flex;
	flex-wrap: wrap;
	.uni-uploader__file{
		width: 168rpx;
		height: 168rpx;
		margin-right: 20rpx;
		margin-bottom:20rpx;
		position: relative;
		uni-image,uni-video{
			width: 100%;
			height: 100%;
		}
		&:nth-child(3n){
			margin-right: 0rpx;
		}
		.close{
			width: 48rpx;
			height: 48rpx;
			background: url(../../../../assets/images/home/icon_del.png) no-repeat 0 0;
			background-size: 100%;
			display: inline-block;
			position: absolute;
			top: -12rpx;
			right: -12rpx;
			z-index: 9;
		}
	}
}
 .uploader__img,.uploader__video{
		border: 1px dotted #C6C8CC;
		width: 166rpx;
		height: 166rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		span{
			color: #A0A8B3;
			&::before{
				content: "";
				display: block;
				width: 60rpx;
				height: 60rpx;
				background: url(../../../../assets/images/home/icon_video.png) no-repeat 0 0;
				background-size: 100%;
				margin: 0 auto 12rpx;
			}
		}
	}
	
	.uploader__img{
		margin-right: 20rpx;
		span{
			&::before{
				background: url(../../../../assets/images/home/icon_picture.png) no-repeat 0 0;
				background-size: 100%;
			}
		}
	}
</style>
